{% extends "../layouts/admin.html" %} {% block content %}

<header class="header navbar bg-white shadow">

	<div class="pull-right offscreen-right">
		<button class="btn btn-primary navbar-btn" onclick="sublime.toggleFilter('.cd-panel')"><i
          class="fa fa-sliders"></i> 筛选
      </button>
	</div>
</header>
<div class=panel-body style="padding-top: 50px;">
	<div class="table-responsive no-border">
		<input id="unitid" type="hidden">
		<table class="table table-bordered table-striped mg-t datatable">
			<thead>
				<tr>
					<th>ID</th>
					<th>用户ID</th>
					<th>订单号</th>
					<th>订单状态</th>
					<th>实付金额</th>
					<th>收货人</th>
					<th>收货地址</th>
					<th>收货电话</th>
					<th>创建时间</th>
					<th>操作</th>

		</table>
	</div>
</div>
<div class="cd-panel from-right">
	<header class="cd-panel-header">
		<h4>高级筛选</h4>
	</header>
	<div class="cd-panel-container">
		<div class="cd-panel-content shadow">
			<div class="form-group">
				<label for="userid">用户ID</label>
				<input type="text" id="userid" name="userid" onclick="this.value=''" class="form-control" placeholder="用户ID">
			</div>

			<button id="searchBtn" type="button" class="btn btn-default">查询</button>
		</div>
	</div>
</div>

<div id="dialogDelete" class="modal fade bs-modal-sm" tabindex="-2" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">删除订单</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-xs-12">
            订单删除后无法恢复，确定删除吗？ <br/>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
        <button id="ok" type="button" class="btn btn-primary" data-loading-text="正在删除...">确 定</button>
      </div>
    </div>
  </div>
</div>
<div id="dialogDetail" class="modal fade bs-modal" tabindex="-3" role="dialog" aria-hidden="true">
	<div class="modal-dialog"  style="width:800px">
		<div class="modal-content">
		</div>
	</div>
</div>
<script language="JavaScript">
	function initDatatable() {
		datatable = $('.datatable').DataTable({
				"dom": '<"toolbar">frtip',
				"searching": false,
				"processing": false,
				"serverSide": true,
				"select": true,
				"ordering": true,
//				"scrollX":true,
//				"autoWidth": true,
				"language": {
					"url": "/assets/plugins/datatables/cn.json"
				},
				"preDrawCallback": function() {
					sublime.showLoadingbar($(".main-content"));
				},
				"drawCallback": function() {
					sublime.closeLoadingbar($(".main-content"));
				},
				"ajax": {
					"url": "/store/order/index",
					"type": "post",
					"data": function(d) {
						d.userid = $('#userid').val();

					}
				},
				"order": [
					[0, 'desc']
				],
				"columns": [

					{
						"data": "id",
						"bSortable": true
					}, {
						"data": "user_id",
						"bSortable": true
					},
					{
						"data": "order_no",
						"bSortable": true
					},
					{
						"data": "status",
						"bSortable": false
					},
					
					{
						"data": "real_price",
						"bSortable": true
					},
					{
						"data": "accept_name",
						"bSortable": true
					},
					{
						"data": "address",
						"bSortable": true
					},
					{
						"data": "mobile",
						"bSortable": true
					},
					{
						"data": "create_time",
						"bSortable": true
					}

				],
				"columnDefs": [
				{
					"render": function(data, type, row) {
						var orderStatus = {{config.setup.orderStatus | stringify | safe}};

						return orderStatus[data];
					},
					"targets": 3
				},
				
				{
					"render": function(data, type, row) {
						return row.country.name+row.province.name+row.city.name+row.district.name+row.address;
					},
					"targets": 6
				},
				{
					"render": function(data, type, row) {
						return sublime.datetime(data);
					},
					"targets": 8
				},
				
				{
          "render": function (data, type, row) {
          	
          	
            return '<div class="btn-group mr10"><button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">' +
              ' <i class="ti-settings"></i> <span class="ti-angle-down"></span></button><ul class="dropdown-menu" role="menu">' +
             '<li><a href="/store/order/detail?id=' + row.id + '"  data-toggle="modal" data-target="#dialogDetail">详情</a></li>' +
             '<li><a href="/store/order/edit?id=' + row.id + '"    data-toggle="modal" data-target="#dialogDetail">编辑</a></li>' +
              '<li><a onclick="del(' + row.id + ')" data-pjax>删除</a></li>' +
              '</ul></div>';
          },
          "targets": 9
        }
			]
		});

	$("#searchBtn").on('click', function() {
		datatable.ajax.reload();
	});
	}

	$(function() {
		initDatatable();
		$("#dialogDetail").on("hidden.bs.modal", function() {
			$(this).removeData("bs.modal");
		});
	});
	
	function del(id) {
    var dialog = $("#dialogDelete");
    dialog.modal("show");
    dialog.find("#ok").unbind("click");
    dialog.find("#ok").bind("click", function (event) {
      var btn = $(this);
      btn.button("loading");
      $.post("/store/order/delete", {id: id}, function (data) {
        if (data.errno == 0) {
          datatable.ajax.reload(null,false);
        } else {
          Toast.error(data.errmsg);
        }
        //重置按钮状态，关闭提示框
        btn.button("reset");
        dialog.modal("hide");
      }, "json");
    });
  }
	
	
</script>
{% endblock %}